import React, { Component } from 'react';
import {
  View,Text,StyleSheet,Image,TouchableOpacity
} from 'react-native';
import pxToDp from '../common/comm';
import ViewPager from 'react-native-viewpager';
import * as DATA from '../data/data';

export default class BannerImg extends Component {
  constructor(props) {  
    super(props);  
    // 用于构建DataSource对象  
    var dataSource = new ViewPager.DataSource({  
        pageHasChanged: (p1, p2) => p1 !== p2,  
    });  
    // 实际的DataSources存放在state中  
    this.state = {  
        dataSource: dataSource.cloneWithPages(DATA.BANNER_IMGS)
    }  
  }  

  _renderPage(data, index) {
      return (
          <TouchableOpacity
              onPress={()=>{
                    this.props.nav.navigate("Banner",{index:index});
                  }}>
              <Image
                  style={styles.page}
                  source={{uri:data}}
              />
          </TouchableOpacity>
      );
  }  

  render() {
    return (
      <ViewPager
          style={styles.container}
        dataSource={this.state.dataSource}
        renderPage={this._renderPage.bind(this)}
        isLoop={true}  
        autoPlay={true}/>
    );
  }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'flex-start',
        paddingTop:5,
        paddingLeft:5,
        backgroundColor:'#999999',
        paddingRight:5,
        paddingBottom:5,
    },
    page: {
        flex: 1,
        width:pxToDp(640),
        height:pxToDp(168),
        resizeMode: 'stretch'
    }
}); 
